<template>
    <div>
      <DynamicTable
        :row-selection="rowSelection"
        :data-request="loadTableData"
        :columns="columns"
        showIndex
      >
      </DynamicTable>
       <a-drawer
      v-if="showDrawer"
      @close="handleDrawClose"
      class="startFlowDrawer"
      width="100%"
      height="95%"
      v-model:open="showDrawer"
      :closable="false"
      placement="bottom"
      destroyOnClose
      :title="null"
    >
      <reviewPagecopy
        v-if="showDrawer"
        :previewFormObj="previewFormObj"
        :previewConfig="previewConfig"
        @cancel="handleCancel"
      ></reviewPagecopy>
    </a-drawer>
    </div>
  </template>
  
  <script lang="tsx" setup>
    import { createVNode, reactive, ref, h } from 'vue';
    import { PlusOutlined, EditOutlined, DeleteOutlined } from '@ant-design/icons-vue';
    import {
      baseColumns,
      type TableListItem,
      type TableColumnItem,
    } from '@/views/processHandling/todoTask/columns';
    import { useFormSortSchema } from '@/views/system/dict/formSchemas';
    import type { TableRowSelection } from 'ant-design-vue/es/table/interface';    
    import { getTodoListByUserId } from '@/api/flow';
    import { useTable } from '@/components/core/dynamic-table';
    import { useFormModal } from '@/hooks/useModal/useFormModal';
    import { Modal } from 'ant-design-vue';
    import reviewPagecopy from '@/components/business/flowReview/reviewPagecopy.vue';
    import { getFormJSON } from '@/api/flow/index';
    import { message } from 'ant-design-vue';


    // 预览表单参数
  const previewFormObj = reactive<any>({
    itemList: [],
    formConf: {},
  });

  // 流程参数
  const previewConfig = reactive({
    showDrawer:ref(false),
    form_url: '',
    form_type: '',
    processName: '',
    isDraft:ref(false),
    processKey: '',
    taskid: '',
    bid: '',
    procinstid: '',
    dataJson: {},
  });

  const showDrawer = ref(false);
  const handleDrawClose = () => {
    showDrawer.value = false;
  };
  // 关闭
  const handleCancel = () => {
    showDrawer.value = false;
  };

  // 处理流程
  const dealTask = async (record: Partial<TableListItem>) => {              
      previewConfig.taskid = record.TASKID;     
      previewConfig.procinstid = record.PROCINSTID;
      showDrawer.value = true;    
  };
  
    defineOptions({
      name: 'todoTask',
    });
  
    const selectDicts = ref<API.TodoList[]>([]);
  
    const rowSelection = reactive<TableRowSelection<API.TodoList>>({
      selectedRowKeys: [],
      onChange: (selectedRowKeys, selectedRows) => {
        console.log('selectedRowKeys changed: ', selectedRowKeys);
        rowSelection.selectedRowKeys = selectedRowKeys;
        selectDicts.value = selectedRows;
      },
    });
  
    const [DynamicTable, dynamicTableInstance] = useTable({
      size: 'small',
      rowKey: 'taskid',
      bordered: true,
    });
    const [showModal] = useFormModal();
  
    const loadTableData = async (params) => {
      const data = await getTodoListByUserId({
        ...params,
        userid: '',
        pageSize: params.limit,
        pageNum: params.page,
      });
      rowSelection.selectedRowKeys = [];
  
      return {
        list: data.rows || [],
        pagination: {
          total: data.total,
          size: params.limit,
          page: params.page,
        },
      };
    };
  
  
    const columns: TableColumnItem[] = [
      ...baseColumns,
       {
      title: '操作',
      width: 220,
      dataIndex: 'ACTION',
      hideInSearch: true,
      align: 'center',
      actions: ({ record }) => [
        {
          label: '审批',
          icon: h(EditOutlined),
          onClick: () => dealTask(record),
        }        
      ],
    },
      
    ];
  </script>
  <style lang="less">
  .startFlowDrawer .ant-drawer-body {
    padding: 10px !important;
  }

  .startFlowDrawer :deep(.ant-drawer-header-title) {
    flex-direction: row-reverse;
  }
</style>
<style lang="less" scoped>
  @import '@/styles/navTheme.less';
  @classBacks: all-flow-container, com-box;

  .themeSetStyle(@classBacks, background-color, sec-back);

  .themeSetStyle(@classBacks, color, wb-text);

  .flow-start-container {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
  }

  .noBox {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100px;
    background: rgba(#000, 0.03);
    font-size: 14px;
  }

  .com-box {
    margin-bottom: 16px;
    padding: 10px 16px;
    background-color: #fff;

    &-title {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 20px;
      font-size: 16px;
    }

    &-content {
      width: 100%;
      overflow: auto hidden;
      white-space: nowrap;

      &-item {
        display: inline-block;
        box-sizing: border-box;
        width: 250px;
        height: 100px;
        margin-right: 10px;
        margin-bottom: 10px;
        border-radius: 4px;
        color: #fff;
        font-size: 16px;
        line-height: 100px;
        text-align: center;
        cursor: pointer;

        &:last-of-type {
          margin-right: 0;
        }

        &:hover,
        &.is-active {
          box-shadow:
            0 2px 7px 0 rgb(0 0 0 / 32%),
            0 1px 4px 0 rgb(183 183 183 / 6%);
        }
      }
    }
  }

  .all-flow-container {
    display: flex;
    flex: 1;
    padding: 15px 20px;
    background-color: #fff;

    .custom-tab {
      flex-grow: 0;
      margin-right: 35px;

      .title {
        font-size: 16px;
        font-weight: 500;
      }

      .custom-tab-content {
        padding: 0;
        list-style-type: none;

        .custom-tab-item {
          min-width: 100px;
          height: 43px;
          border-bottom: 1px solid #e8e8e8;
          font-size: 14px;
          line-height: 43px;
          text-align: center;
          cursor: pointer;

          &.is-active {
            border-bottom: 2px solid #1890ff;
            color: #1890ff;
          }
        }
      }
    }

    .custom-tab-container {
      flex-grow: 1;
      overflow-y: auto;

      .custom-tab-block {
        box-sizing: border-box;

        .title {
          margin: 10px 0 20px;
          font-size: 16px;
          font-weight: 500;
          text-decoration: underline double #1890ff;
          text-decoration-thickness: initial;
        }

        .subtitle {
          font-size: 16px;
          font-weight: 500;
        }

        .custom-tab-block-content {
          box-sizing: border-box;
          width: 100%;

          .custom-tab-block-item {
            display: flex;
            box-sizing: border-box;
            align-items: center;
            height: 70px;
            margin-bottom: 20px;
            padding: 0 20px;
            border: 1px solid #dee0e3;
            border-radius: 6px;
            font-size: 15px;
            font-weight: 500;
            line-height: 70px;
            text-align: left;
            cursor: pointer;

            &:hover {
              border-color: #1890ff;
              color: #1890ff;
            }

            .img {
              display: inline-block;
              width: 34px;
              height: 34px;
              margin-right: 10px;
              border-radius: 4px;
              color: #fff;
              line-height: 34px;
              text-align: center;
              vertical-align: middle;
            }

            .name {
              display: inline-block;
              flex: 1;
              line-height: 18px;
              word-wrap: break-word;
              word-break: break-all;
            }
          }
        }
      }
    }
  }
</style>
